<template>
	<view class="box">
		<!-- 头部 -->
		<view class="header">
			<view class="search-box">
				<view style="float: left;">
					<text @click="searchMa()" class="icon iconfont"
						style="font-size: 30px; color: #FFFFFF;">&#xe749;</text>
				</view>
				<uni-search-bar @confirm="getList(e)" v-model="keyword" class="uni-mt-10" radius="5"
					placeholder="请输入充电柜名称或编号" clearButton="auto" cancelButton="none" />
				<view @click="toggleSearch()"
					style="float: right; color: #FFFFFF; line-height: 50px; font-size: 15px; width: 20%; text-align: center;">
					{{ searchName }}<text class="icon iconfont"
						style="color: #FFFFFF; font-size: 18px; position: relative; top: 1rpx;">&#xe65c;</text>
				</view>
			</view>

			<view class="clear"></view>
			<view class="tabBox">
				<view @click="searchRang(0)" :class="{ 'tarBarBorder' : type ==0 }">全部</view>
				<view @click="searchRang(1)" :class="{ 'tarBarBorder' : type== 1 }">我的</view>
				<view @click="searchRang(2)" :class="{ 'tarBarBorder' : type == 2 }">下级运营商</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<uni-card v-for="(item,index) in cabinetList" :key="index" title="" extra="">
				<template v-slot:title>
					<view @click="detail(item)" style="border-bottom: 1px solid #E6E6E6;">
						<view class="single">
							<text class="charge_name">{{ item.name || '' }}</text>
							<text v-if="item.isEnable === 1" class="status"
								style="color: #1976D3; margin-left: 10px;">运营中</text>
							<text v-if="item.isEnable === 0" class="status"
								style="color: red; margin-left: 10px;">已停用</text>
							<view style="float: right;">
								<image v-if="item.cabinetState.signalIntensity"
									style="width: 30rpx; height: 30rpx; position: relative; top: 4rpx;left: 12rpx;"
									:src="signalData[item.cabinetState.signalIntensity]"></image>
								<image v-else
									style="width: 30rpx; height: 30rpx; position: relative; top: 4rpx;left: 12rpx;"
									src="/static/signal0.png"></image>
							</view>
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view @click="detail(item)">
					<view class="uni-body">
						地址：{{ item.address || '暂无' }}
					</view>
					<view class="uni-body">
						设备编号：<text>{{ item.code || '' }}</text>
					</view>
					<view class="uni-body">
						所属场站：<text>{{ item.chargingNetwork.name || '暂无' }}</text>
					</view>
					<view class="uni-body">
						<image style="width: 35rpx; height: 35rpx; margin-right: 6px; position: relative; top: 7rpx;"
							src="../../static/power.png"></image>
						<text style="color: #21B03C;">使用中：{{ item.userdcount || 0 }}</text>
						<text style="margin-left: 10px; color: red;">故障：{{ item.faultcount || 0 }}</text>
						<text style="margin-left: 10px; color: red;">禁用：{{ item.disablecount || 0 }}</text>
					</view>
				</view>
				<view class="oprate_btns">
					<button @click="costMan(item)" type="primary" size="mini"
						style="margin-right: 10rpx; background-color: #4DA7FF;">更改资费</button>
					<button @click="toggleOpen(item)" type="primary" size="mini"
						style="margin-right: 10rpx; background-color: #4DA7FF;">开仓</button>
					<button @click="dialogToggle('0', item)" v-if="item.isEnable === 1" type="primary" size="mini"
						style="margin-right: 10rpx; background-color: #4DA7FF;">停用</button>
					<button @click="dialogToggle('1', item)" v-if="item.isEnable === 0" type="primary" size="mini"
						style="margin-right: 10rpx; background-color: #4DA7FF;">启用</button>
					<button @click="equipmentMan(item)" type="primary" size="mini"
						style="background-color: #4DA7FF;">设备配置</button>
				</view>
			</uni-card>
			<view v-show="isLoadMore && cabinetList.length >0">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>

			<view class="nodata" v-if="cabinetList.length == 0">
				<image class="empty_img" src="/static/empty.png" mode="widthFix"></image>
				<view>没有你想要的内容</view>
			</view>
		</view>
		<!-- 提示信息 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="messStat" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 筛选弹窗 -->
		<!-- 0查询全部 1查询运营中 2查询已停用 -->
		<uni-popup ref="popupSearch" background-color="#fff" style="z-index: 999;">
			<view class="popup-content" style="padding: 20px;">
				<button @click="searchStatus(0)" :class="{ 'buttonTyle' : status == 0 }" type="default" size="mini"
					style="margin-right: 10rpx; background-color: #FFFFFF; padding: 0px 30px;">全部</button>
				<button @click="searchStatus(1)" :class="{ 'buttonTyle' : status == 1 }" type="default" size="mini"
					style="margin-right: 10rpx; background-color: #FFFFFF; padding: 0px 20px;">运营中</button>
				<button @click="searchStatus(2)" :class="{ 'buttonTyle' : status == 2 }" type="default" size="mini"
					style="background-color: #FFFFFF; padding: 0px 20px;">已停用</button>
			</view>
		</uni-popup>
		<!-- 停用启用提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog v-if="msgType == '0'" :type="msgType" title="提示"
				content="停用后,用户将无法下单使用此设备.充电中的订单也会断电,但仓门还可正常开启.是否确定停用?" @confirm="dialogConfirm()">
			</uni-popup-dialog>
			<uni-popup-dialog v-if="msgType == '1'" :type="msgType" title="提示" content="是否启用该充电柜?"
				@confirm="dialogConfirm()"></uni-popup-dialog>
		</uni-popup>
		<!-- 开仓弹窗 -->
		<uni-popup ref="popupOpen" background-color="#fff" @change="openChange">
			<view class="popup-content" style="padding: 20px;">
				<view style="margin-bottom: 20px;">{{equipInfo.name}}</view>

				<view class="wareHouse" v-for="(item, index) in wareList" :key="index" @click="wareSelect(item,index)">
					<view :class="['enableClass',{'wareActive':item.active}]" v-if="!item.doorIsEnable">禁用</view>

					<view v-else
						:class="{ 'wareHouse1' : item.status == 0, 'wareHouse2' : item.status == 1, 'wareHouse3' : item.status == 2,'wareActive':item.active }">
						<text :class="{ 'wareHouseSel' : item.color }" style="color: #20B13B;"
							v-if="item.status == 0">空闲</text>
						<text :class="{ 'wareHouseSel' : item.color }" style="color: #FE9201;"
							v-if="item.status == 1">使用中</text>
						<text :class="{ 'wareHouseSel' : item.color }" style="color: #BEBEBE;"
							v-if="item.status == 2">故障!</text>
						<!-- <text :class="{ 'wareHouseSel' : item.color }" style="color: red;"
							v-if="item.realTimeStatus.doorStatus === 1">已开仓</text> -->
					</view>
					<view class="clear"></view>
					<view class="wareHouseText" style="text-align: center;">
						{{ item.binIndex }}号仓
					</view>
					<view class="clear"></view>
				</view>
				<view class="clear"></view>
				<view style="margin: 30px 0px 0px 0px; width: 590rpx; float: right; text-align: right;">
					<uni-data-checkbox style="float: left;" v-model="allCheckBoxVal" multiple :localdata="allCheckBox"
						@change="checkChange">
					</uni-data-checkbox>
					<button @click="openWare()" type="primary" size="mini"
						style="margin-right: 10rpx; background-color: #4DA7FF; width: 180rpx;">开仓</button>
					<button @click="closeOpen()" type="primary" size="mini"
						style="background-color: #C2C2C2; width: 180rpx;">取消</button>
					<view class="clear"></view>
				</view>
				<view class="clear"></view>
			</view>
		</uni-popup>
		<!-- 返回顶部 -->
		<view v-if="page >= 1" class="backTop" @click="backTop()">
			<text class="icon iconfont" style="font-size: 30px; color: #4DA7FF;">&#xe63a;</text>
		</view>
		<!-- 扫码 -->
		<!-- <view class="searchMa" @click="searchMa()">
			<text class="icon iconfont" style="font-size: 30px; color: #4DA7FF;">&#xe606;</text>
		</view> -->
		<!-- <view class="footer">
			<view @click="" class="footerBox">
				<view><text style="color: #1A75D1;" class="icon iconfont">&#xe692;</text></view>
				<view style="color: #BBBBBB; font-size: 14px">设备列表</view>
			</view>
			<view @click="mySeit()" class="footerBox">
				<view><text style="color: #ABABAB; font-size: 22px;" class="icon iconfont">&#xe605;</text></view>
				<view style="color: #BBBBBB; font-size: 14px;">设备管理</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		equip,
		control
	} from '@/api/equip.js';

	import {
		binparam
	} from '@/common/interface.js';
	export default {
		data() {
			return {
				keyword: '', //搜索关键词
				type: 0, //0查询全部 1查询空闲
				page: 1, //页码
				size: 10,
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				refresh: false, // 下拉刷新标示
				equipInfo: {}, //当前设备info
				status: 0,

				messStat: 'success',
				searchName: '全部',
				statusData: {
					// 0查询全部 1查询运营中 2查询已停用
					0: '全部',
					1: '运营中',
					2: '已停用'
				},
				signalData: {
					1: "/static/signal1.png",
					2: "/static/signal2.png",
					3: "/static/signal3.png",
					4: "/static/signal4.png",
					5: "/static/signal5.png",
				},
				form: {
					search_dataRang: 9,
					search_keyWord: '',
					search_isEnable: '',
					pageNumber: 0,
					pageSize: 5,
					sort: 'createTime, desc'
				},
				cabinetList: [],
				openType: '',
				msgType: '',
				wareList: [],
				wareBox: [],
				allCheckBox: [{
					text: '全选',
					value: 1
				}],
				allCheckBoxVal: [0],
				more: 'more',
				listId: '',
				equipId: '',
				messageText: '',
				name: ''
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.keyword = ''
			this.getList();
			this.refresh = true;
		},

		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.page++;
				this.getList();
			}
		},
		// 监听全选赋值
		watch: {
			// 全选
			allCheckBoxVal(val) {
				if (val[0] == 1) {
					this.wareList.forEach(item => {
						item.active = true;
					})
				} else if (val[0] == 0) {
					this.wareList.forEach(item => {
						item.active = false;
					})
				}
			},
		},
		methods: {
			// 选择查询范围
			searchRang(e) {
				this.type = e;
				this.keyword = '';
				
				this.page = 1;
				this.getList();
			},
			// 查询按钮
			searchStatus(e) {
				this.status = e;
				this.$refs.popupSearch.close();
				this.page = 1;
				this.getList();
				this.searchName = this.statusData[e];
			},
			// 获取列表数据
			getList() {
				this.$Toast.loading('加载中');
				let param = {
					pageNum: this.page,
					pageSize: this.size,
					nameAndCode: this.keyword,
					operator: this.type,
					status: this.status
				};
				equip('/selectOAMAll', 'get', param).then(res => {
					let datas = res.data.records;
					this.cabinetList = this.page == 1 ? datas : this.cabinetList.concat(datas);
					if (datas.length < this.size) { //小于size数，停止请求
						this.isLoadMore = true;
						this.loadStatus = 'nomore';
					} else {
						this.isLoadMore = false;
					}
					uni.hideLoading();
					if (this.refresh) {
						uni.stopPullDownRefresh();
						this.refresh = false;
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				})
			},
			// 打开筛选窗口
			toggleSearch() {
				this.$refs.popupSearch.open('top')
			},
			// 打开开仓窗口
			toggleOpen(item) {
				this.wareList = [];
				this.getBinState(item.code);
				this.equipInfo = item;
				this.$refs.popupOpen.open('bottom')
			},
			getBinState(code) {
				equip(`/selectBins?code=${code}`, 'get').then(res => {}).catch(err => {
					this.wareList = err;
					this.wareList.forEach(item => item.active = false);
				})
			},
			// 关闭开仓窗口
			closeOpen() {
				this.$refs.popupOpen.close()
			},
			// 开仓窗口改变时执行操作
			openChange(e) {
				if (!e.show) {
					for (let i = 0; i < this.wareList.length; i++) {
						this.$delete(this.wareList[i], 'backColor');
						this.$delete(this.wareList[i], 'border');
						this.$delete(this.wareList[i], 'color');
					}
					this.wareBox = [];
					this.allCheckBoxVal = [0];
				}
			},
			// 停用或启用
			dialogToggle(type, item) {
				this.equipInfo = item;
				this.msgType = type;
				this.$refs.alertDialog.open();
			},
			// 是否启用或停用充电柜
			dialogConfirm() {
				let url = this.msgType == '1' ? '/enable' : '/disable';
				let msg = this.msgType == '1' ? '启用成功' : '停用成功';
				this.$Toast.loading('操作中···');
				control(url, 'get', {
						chargingCabinetCode: this.equipInfo.code
					}).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.$Toast.success(msg);

							this.page = 1;
							setTimeout(() => {
								this.getList();
							}, 300)
						}
					})
					.catch(err => {
						uni.hideLoading();
					})
			},
			// 选择仓
			wareSelect(item, index) {
				let param = item;
				param.active = !item.active;
				this.$set(this.wareList, index, param);

				let filter = this.wareList.filter(item => item.active);
				if (filter.length == 0) {
					this.allCheckBoxVal = [0];
				} else if (this.wareList.length == filter.length) {
					this.allCheckBoxVal = [1];
				} else {
					this.allCheckBoxVal = [2];
				}
			},
			checkChange(e) {
				let val = e.detail.value;
				this.allCheckBoxVal = val.length > 0 ? val : [0];
			},
			// 开仓提交
			openWare() {
				this.$Toast.loading('开仓中···');
				let filters = this.wareList.filter(item => item.active).map(pp => {
					return pp.binIndex
				});
				if (filters.length == 0) {
					this.$Toast.error('请选择仓门');
					return;
				}
				let binpam = binparam();
				let params = {
					binIndexs: filters,
					chargingCabinetCode: this.equipInfo.code,
				};
				control('/doorOpens', 'post', params).then(res => {
					if (res.code == 200) {
						this.$Toast.success('开仓成功');
						this.$refs.popupOpen.close();
					}
				}).catch(err => {

				})
			},
			// 跳转设备详情页
			detail(item) {
				uni.navigateTo({
					url: `/pages/equipment/equipmentDetail?chargeId=${item.chargeTmplId}&equipid=${item.id}&code=${item.code}`
				});
			},
			// 跳转设备配置页
			equipmentMan(item) {
				uni.navigateTo({
					url: '/pages/equipment/equipmentManagement?code=' + item.code + '&equipid=' + item.id
				});
			},
			// 跳转资费配置页
			costMan(item) {
				uni.navigateTo({
					url: `/pages/equipment/costManagement?chargeId=${item.chargeTmplId}&equipid=${item.id}`
				});
			},
			// 跳转我的功能
			mySeit() {
				uni.navigateTo({
					url: '/pages/myFunction/index'
				});
			},
			// 返回顶部
			backTop() {
				this.page = 1;
				this.getList();
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 300 // 滚动动画的时长
				})
			},
			// 扫码
			searchMa() {
				uni.scanCode({
					success: function(res) {
						uni.navigateTo({
							url: '/pages/equipment/equipmentDetail?code=' + res.result.substring(res
								.result.lastIndexOf("/") + 1)
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/main.scss";

	.header {
		width: 100%;
		background-color: #1976D3;
		/* position: fixed;
		top: 0px; */
		z-index: 1;
	}

	.tabBox {
		width: 100%;
		background-color: #FFFFFF;
	}

	.tabBox view {
		width: 33%;
		line-height: 40px;
		text-align: center;
		color: #1976D3;
		display: inline-block;
	}

	.tarBarBorder {
		border-bottom: 2px solid #1976D3;
	}

	.content {
		margin-top: 20px;
	}

	.charge_name {
		display: inline-block;
		max-width: 70%;
	}

	.single {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}

	.status {
		font-size: 14px;
	}

	.uni-body {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wareHouse {
		width: 20%;
		height: 20%;
		float: left;
		margin-left: 27rpx;
		margin-top: 15px;
	}

	.wareHouseText {
		width: 100%;
		text-align: center;
		float: left;
		margin-top: 5px;
	}

	.wareHouse1,
	.wareHouse2,
	.wareHouse3,
	.wareHouse4,
	.enableClass {
		width: 93%;
		height: 100%;
		line-height: 105rpx;
		text-align: center;
		border-radius: 10px;
	}

	.wareHouse1 {
		border: 2px solid #20B13B;
	}

	.wareHouse2 {
		border: 2px solid #FE9201;
	}

	.wareHouse3 {
		border: 2px solid #BEBEBE;
	}

	.wareHouse4 {
		border: 2px solid red;
	}

	.wareHouseSel {
		color: #FFFFFF !important;
	}

	.enableClass {
		border: 2px solid red;
		color: red;
	}

	/deep/ .uni-mt-10 {
		width: 70% !important;
		float: left;
	}

	.search-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttonTyle {
		background-color: #4DA7FF !important;
		color: #FFFFFF !important;
		border: none !important;
	}

	.backTop {
		position: fixed;
		bottom: 50px;
		right: 20rpx;
	}

	.searchMa {
		position: fixed;
		top: 195rpx;
		right: 20rpx;
	}

	/deep/ button {
		padding: 0 30rpx !important;
	}

	/deep/ button::after {
		border: none;
	}

	.oprate_btns {
		border-top: 1px solid #E6E6E6;
		padding: 10px 0px 0px 0px;
		margin-top: 10px;
	}

	.wareActive {
		background: #4DA7FF;
		border-color: transparent;

		text {
			color: #FFFFFF !important;
		}
	}

	/deep/ .uni-searchbar {
		padding-right: 10rpx !important;
	}
</style>
